<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/page1.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./../font/iconfont.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
<style>
.swiper-container {
    width:100%;
    height: 650px;
    margin-top: 50px;
} 
.swiper-slide{
    /* background-color:greenyellow; */
    width: 100%;
    height: 600px;
}
.swiper-slide img{
    width:100%;
    height:100%;
}
/* ----------------------------------------- */
.swiper-container {
      width: 100%;
     
    }
    .swiper-slide {
        
      /* Center slide text vertically  */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-slide .mm{
        margin-right:20px;
    }
</style>
</head>
<body>
    <div class="wrap">
       
        <div class='header-top fr' id="dingbu">
            <div class="topbar-en fr" style="margin-right:30px;" >
                <a href="#" title="语言">EN</a>
             </div>
            <div class="topbar-service fr" style="margin:0 30px;" >
                <a href="#" title="在线客服"><i class="iconfont">&#xe677;</i></a>
             </div>
            <div class="topbar-cart fr" style="margin-left:30px;">
                <a href="./page5.html" title="购物车"><i class="iconfont">&#xe60a;</i></a>
            </div>
            
            <div class="topbar-user fr">
                <a href="./login.html" title="登入">登入</a>
                &nbsp;或 &nbsp;
                <a href="./login.html" title="注册">注册</a>
                &nbsp;ANTA会员
            </div>
        </div>
        <!-- --------------------第一部分结束 -->
        <div class="header-nav fl">
            <div class="main">
            <div class="header-logo fl">  
                <div class="logo-inner">
                    <a href="">
                      <img src="https://img.fishfay.com/theme/images/logo/logo-anta-r-02.svg" alt=""></a>
                </div>
            </div>
            <!-- -------------二级菜单开始 -->
        
         <div class="nav-list fl">
            <ul class="back1">
            <li class="webnav fl">
                <a href="./page2.html" >男子</a>
                <ol class="webnav-box1"> 
                    <li>
                        <dl class="webnav-box2">  
                            <dt class="orange">所有鞋类</dt>
                            <dd>运动鞋 </dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                            <dd>所有鞋类</dd>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="webnav-box3">  
                            <dt class="orange">所有服装</dt>
                            <dd>套头卫衣</dd>
                            <dd>套头卫衣</dd>
                            <dd>套头卫衣</dd>
                            <dd>套头卫衣</dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="webnav-box4">  
                            <dt class="orange">所有配件</dt>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                            <dd>所有鞋类</dd>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="webnav-box5">  
                            <dt class="orange">运动项目</dt>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                            <dd>所有鞋类</dd>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                        </dl>
                    </li>
                </ol>
            </li>
            <li class="back1-box1">
                <a href="./page2.html">女子</a>
            </li>
            <li data-type="kids" class="back1-box1">
                <a href="../page2.html" target="_blank" title="儿童">儿童</a>
            </li>
            <li data-type="antakids" class="back1-box1">
                <a href="./page2.html" target="_blank" title="安踏儿童">安踏儿童</a>
            </li>
            <li data-type="culture" class="back1-box1">
                <a href="./page2.html" target="_blank" title="品牌文化">品牌文化</a>
            </li>
            <li data-type="advert" class="back1-box1">
                <a href="./page2.html" target="_blank" title="观赏视频">观赏视频</a>
            </li>
            <li data-type="contact" class="back1-box1">
                <a href="./page2.html" target="_blank" title="联系我们">联系我们</a>
            </li>
         </ul> 
        </div>
           <!-- 搜索框 -->
            <div class="nav-search-box fl">
                    <a class="nav-search-btn" title="搜索"><i class="iconfont">&#xe649;</i></a>
                    <input type="text"  placeholder="搜索" class="nav-search-input">
           </div>
       </div>
    </div>
<!-- --------------------轮播图 ------------------->
     <div class="main"> 
      <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src=" http://anta-cn-web.obs.myhwclouds.com/anta-cn-web/descente/2021/04/02/8cccac9a5d76f2726faf8ff54536d7ac.jpg" alt=""> 
            </div>
            <div class="swiper-slide">
                <img src="http://anta-cn-web.obs.myhwclouds.com/anta-cn-web/descente/2021/04/02/109a752f53e21820825633b914a7f940.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        </div>
       </div> 
<!-- --------------------关晓彤图 -->
    <div class="back2">
      <div class="main">
          <div class="back2-bg">
              <div class="back2-box1" padding-top="50px">
                    <a href="./page2.html" class="hoverup-item1">
                        <img src="../imgs/01.png" alt="">
                        <div class="hover-main1">
                            <img src="https://img.fishfay.com/anta-cn-web/descente/2020/07/17/a6fe4dc708aa33c48370977435f8fd35.png" alt="" class="hoverup-cover">
                       </div>
                   </a>
                  <a href="./page2.html" class="hoverup-item2">
                    <img src="../imgs/02.png" alt="">
                    <div class="hover-main2">
                    <img src="http://anta-cn-web.obs.myhwclouds.com/anta-cn-web/descente/2021/03/11/641d7b59dbccc75609c1fe9118bd61ad.png" alt=""  class="hoverup-cover">
                   </div>
                </a>
                <a href="./page2.html" class="hoverup-item3">
                    <img src="../imgs/03.png" alt="">
                    <div class="hover-main3">
                        <img src="http://anta-cn-web.obs.myhwclouds.com/anta-cn-web/descente/2021/03/11/978d21579dd986d403b21e49c6e1cb94.png" alt="" class="hoverup-cover">
                    </div>
                </a>
                <a href="./page2.html" class="hoverup-item4">
                    <img src="../imgs/04.png" alt="">
                    <div class="hover-main4">
                        <img src="https://img.fishfay.com/anta-cn-web/descente/2020/07/17/0bfc2a210d43211f20fd2b9e9b6c3d44.png" alt="" class="hoverup-cover">
                    </div>
                </a> 
              </div>
          </div>
      </div>
    </div>
    <!-- --------------------------张继科图片 -->
    <div class="main">
    <div class="back3">
            <!-- <a href="./page2.html">
              <img src="../imgs/05.jpg" alt="">
            </a> -->
        </div>
    </div>
    <!-- --------------------------陈飞宇图片 -->
    <div class="main">
        <div class="back4">
                <!-- <a href="./page2.html">
                  <img src="http://anta-cn-web.obs.myhwclouds.com/anta-cn-web/descente/2021/03/11/ae819043ef32027068ce411ea0d3c8e8.jpg" alt="">
                </a> -->
            </div>
        </div>
  <!-- -------------------------太阳花图片 -->
    <div class="main">
        <div class="back5">
                <!-- <a href="./page2.html">
                    <img src="http://anta-cn-web.obs.myhwclouds.com/anta-cn-web/descente/2021/03/11/2ce63f438ec5541d11c43f3f5b1f5d79.jpg" alt="">
                </a> -->
            </div>
        </div>
   <!-- --------------------------小程序图片 -->  
      
          <div class="main">
            <div class="back6">
              <!-- <a href="./page2.html">
                  <img src="http://anta-cn-web.obs.myhwclouds.com/anta-cn-web/descente/2021/03/11/b4a2a0664ef68365417261d9c00bba16.jpg" alt="">
              </a> -->
         </div>
      </div>
     
        <div class="main">
            <div class="back7">
            <!-- <a href="#">
                <img src="http://anta-cn-web.obs.myhwclouds.com/anta-cn-web/descente/2021/03/11/b506d7e874898ddbe03ab1e7ac59b468.jpg" alt="">
            </a> -->
       </div>
    </div>
    <!-- ---------------------------猜你喜欢 -->
    <div class="main">
    <div class="back8">
            <div class="back8-box">
                <h3>猜你喜欢</h3>
                <a href="#">即刻选购</a>
            </div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" style="width:324px; height:324px; float: left; margin-top:100px;">
                      <img src="../imgs/06.jpg" alt="" class="mm">
                      <img src="../imgs/07.jpg" alt="" class="mm">
                      <img src="../imgs/08.jpg" alt="" class="mm">
                      <img src="../imgs/06.jpg" alt="" class="mm">
                </div>
                  
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
              </div>
        </div>
    </div>
    <div class="main">
        <div class="back9">
                 <img src="../imgs/09.png" alt="">
        </div>
    </div>
        <!-- ----------------------结尾------------ -->
        <div class="main">
            <div class="back10 fl">
                <div class="ft-slogan fl">
                    <img src="https://img.fishfay.com/theme/images/logo/slogan-anta-r.svg" alt="" >
                </div>
               <div class="back10-box">
                       <ul class="back10-box1">
                           <li>安踏海外</li>
                           <li>|</li>
                           <li>安踏投资者关系</li>
                       </ul>
                       <ul class="back10-box2">
                            <li>Copyright(C) 2020 by www.ANTA.com</li>
                            <li>©安踏体育用品有限公司版权所有</li>
                            <li>营业执照</li>
                            <li>开户许可证</li>
                            <li>闽ICP备11020421号</li>
                            <li>闽公网安备35058202000423号</li>
                        </ul>
                        <ul class="back10-box3">
                            <li>安踏儿童</li>
                            <li>|</li>
                            <li>Fila</li>
                            <li>|</li>
                            <li>Kolon Sport</li>
                            <li>|</li>
                            <li>Descente</li>
                            <li>|</li>
                            <li>Sprandi</li>
                            <li>|</li>
                            <li>Kingkow</li>
                        </ul>
               </div>
            </div>
        </div>
    <!-- ------------------------侧边栏--------------- -->
    <div class="web-covers">
       <a href="#dingbu"></a>
       <a href="./page5.html" title="购物车" class="cart"></a> 
   </div> 
    
    
  </div>
</div>  
    



    <script src='./js/lib/jquery-1.8.3.js'></script>
    <script src="./js/page01.js"></script>
    <script src="./js/lib/swiper.js"></script> 
    <!-- <script>    
             $(".web-covers").load(".page1.html")
    </script> -->
   
    
    <!-- <script src="./js/lib/swiper-bundle.min.js"></script> -->

<script>       
// -------------------上面轮播图-------------------------------- 
    var mySwiper = new Swiper ('.swiper-container', {
    //   direction: 'vertical', // 垂直切换选项
      direction: 'horizontal', // 水平切换选项
      loop: true, // 循环模式选项

      autoplay: {
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
      
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable :true,
      },
      
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })     
    // -------------------------下面轮播图---------------------------------
    // var swiper = new Swiper('.swiper-container', {
    //   pagination: {
    //     el: '.swiper-pagination',
    //     type: 'progressbar',
    //   },
    //   navigation: {
    //     nextEl: '.swiper-button-next',
    //     prevEl: '.swiper-button-prev',
    //   },
    // });
    </script>
</body>
</html>